<template>
  <div class="classroom-container">
    <h3>我的上传</h3>
    <div class="upload-page">
      <div class="upload-search">
        <el-form :model="queryParams" ref="queryForm" :inline="true"
                 @submit.native.prevent v-show="showSearch" label-width="68px">
          <el-form-item label="" prop="videoName">
            <el-input v-model.trim="queryParams.videoName" suffix-icon="el-icon-search" placeholder="标题搜索"></el-input>
          </el-form-item>
          <el-form-item label="审核状态" prop="auditSts">
            <el-select v-model="queryParams.auditSts" placeholder="请选择" clearable
                       size="small">
              <el-option
                v-for="dict in dict.type.auditStatus"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="视频分类" prop="menuId">
            <el-select v-model="queryParams.menuId" placeholder="请选择" clearable
                       size="small">
              <el-option
                v-for="type in typeList"
                :key="type.id"
                :label="type.menuName"
                :value="type.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div style="margin-left: auto">
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
        </div>
      </div>
      <div class="upload-list">
        <ul>
          <li v-for="(item,index) in myUploadList" :key="index">
            <div class="item-img">
              <!-- <el-image :src="getImgUrl(item.coverId)" :fit="imgFill"></el-image> -->
              <el-image :src="item.imgUrl" :fit="'cover'" style="height:100%;width:100%"></el-image>
            </div>
            <div class="item-content">
              <div class="item-content-header">
                <div class="content-aduit" v-if="item.auditSts == 'U'" style="border: 1px solid #F5C96F;color: #F5C96F;">
                  <span>{{item.auditName}}</span>
                </div>
                <div class="content-aduit" v-else-if="item.auditSts == 'S'" style="border: 1px solid #1FDA87;color: #1FDA87;">
                  <span>{{item.auditName}}</span>
                </div>
                <div class="content-aduit" v-else-if="item.auditSts == 'F'" style="border: 1px solid #FA4B4B;color: #FA4B4B;">
                  <span>{{item.auditName}}</span>
                </div>
                <div class="content-title">
                  <span>{{item.videoName}}</span>
                </div>
                <div class="content-type">
                  <span>视频分类：{{item.type}}</span>
                </div>
                <div class="content-upload-person">
                  <i class="el-icon-user-solid"></i>
                  <span>上传者：{{item.createUserName == null ? "（空）":item.createUserName}}</span>
                  <i class="el-icon-user-solid"></i>
                  <span>审核员：{{(item.auditUserName == '' || item.auditUserName == null) ? "（空）":item.auditUserName}}</span>
                </div>
                <div class="content-time">
                  <img src="../../assets/icons/time-icon.png" alt="">
                  <span>{{item.createTime}}</span>
                </div>
              </div>
              <div class="item-content-text">
                {{item.videoSummary}}
              </div>
            </div>
            <div class="item-button">
              <el-button type="danger" style="width:6vw" @click="deleteViewInfo(item.id)">删除</el-button>
            </div>
          </li>
        </ul>
      </div>
      <div class="my-pagination">
        <el-pagination
          v-if="total > 10"
          @current-change="handleCurrentChange"
          :current-page.sync="current"
          :page-size="10"
          layout="total, prev, pager, next"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
// eslint-disable-next-line import/no-cycle
import dictApi from '@/framework/api/dict'
import { getPage, del } from '@/api/classroom/learnVideoManage'
import { getMenuListByType } from '@/api/classroom/videoReview'
import { cloud } from '@/framework/utils/request'

export default {
  name: 'myUpload',
  dicts: ['auditStatus'],
  data() {
    return {
      queryParams: {
        pageNo: 1, // 页码
        pageSize: 10, // 页容量
        auditSts: null,
        menuId: null,
        videoName: null,
        userId: this.$store.getters.userId
      },
      total: '',
      current: 1,
      showSearch: true,
      typeList: [],
      myUploadList: [],
      baseURL: process.env.VUE_APP_BASE_API + cloud.file,
      dictList: [],
      dictType: 'auditStatus'
    }
  },
  created() {
    // 初始化，获取菜单
    this.getMenu()
    if (localStorage.getItem('dictList')) {
      this.dictList = JSON.parse(localStorage.getItem('dictList'))
    } else {
      this.getDictData()
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getList()
    })
  },
  methods: {
    getMenu() {
      getMenuListByType().then((res) => {
        this.typeList = res.data
      })
    },
    getList() {
      getPage(this.queryParams).then((res) => {
        if (res.code == '00000') {
          this.myUploadList = res.data.rows.map((item) => {
            return {
              imgUrl: this.getImgUrl(item.coverId),
              type: this.getType(item.menuId),
              auditName: this.getDict(item.auditSts),
              ...item
            }
          })
          this.total = res.data.totalRows
        }
      })
    },
    // 获取封面图片路径
    getImgUrl(id) {
      return `${this.baseURL}/sysFileInfo/public/preview?fileId=${id}`
    },
    // 获取视频分类
    getType(id) {
      const type = this.typeList.find((item) => item.id == id)
      return type && type.menuName
    },
    // 获取视频状态
    getDict(data) {
      const dict = this.dictList.find((item) => item.dictCode == data)
      return dict && dict.dictName
    },
    // 删除
    deleteViewInfo(id) {
      const message = '确定要删除吗?'
      this.$dtMessageBox({ title: '提示', message, type: 'warning' }).then(() => {
        del(id).then((res) => {
          const type = res.success ? 'success' : 'error'
          // 提示消息
          this.$dtMessage({
            type,
            message: '删除成功'
          })
          this.getList()
        })
      })
    },
    handleCurrentChange(val) {
      this.queryParams.pageNo = val
      this.getList()
    },
    // 获取学科字典值列表
    getDictData() {
      dictApi.fetchList(this.dictType).then((res) => {
        if (res.code == '00000') {
          const dictList = res.data.map((item) => {
            return {
              dictCode: item.dictCode,
              dictName: item.dictName
            }
          })
          this.dictList = dictList
          localStorage.setItem('dictList', JSON.stringify(dictList))
        }
      })
    },
    // 搜索按钮
    handleQuery() {
      this.queryParams.pageNo = 1
      this.getList()
    },
    /** 重置按钮操作 */
    handleReset() {
      this.resetqueryForm()
      this.handleQuery()
    },
    resetqueryForm() {
      this.queryParams = {
        pageNo: 1,
        pageSize: 10,
        auditSts: null,
        menuId: null,
        videoName: null,
        userId: this.$store.getters.userId
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .classroom-container {
    width: 100%;
    height: 100%;
    background: #f8f9ff;
    .upload-page {
      height: 100%;
      padding: 20px;
      background-color: #fff;
      border-radius: 4px;
      box-shadow: 0 3px 6px #00000029;
      .upload-search {
        display: flex;
      }
      .upload-list {
        height: 100%;
        width: 100%;
        ul {
          margin-block-start: 0;
          margin-block-end: 0;
          padding-inline-start: 0;
          margin-top: 5px;
          li {
            display: flex;
            align-items: center;
            list-style: none;
            margin-bottom: 20px;
            .item-img {
              width: 280px;
              height: 150px;
            }
            .item-content {
              margin: 20px;
              width: 70%;
              .item-content-header {
                display: flex;
                align-items: center;
                font-family: "Source Han Sans CN";
                min-height: 25px;
                flex-wrap: wrap;
                .content-aduit {
                  width: 74px;
                  border-radius: 11px;
                  background: #1fda870d;
                  border: 1px solid #1fda87;
                  font-weight: 400;
                  font-size: 12px;
                  color: #1fda87;
                  text-align: center;
                  white-space: nowrap;
                  span {
                    display: inline-block;
                    line-height: 25px;
                  }
                }
                .content-title {
                  margin: 0 30px 0 10px;
                  font-weight: 600;
                  font-size: 16px;
                  text-align: left;
                  color: #00080f;
                  white-space: nowrap;
                }
                .content-type {
                  font-weight: 400;
                  font-size: 15px;
                  text-align: left;
                  color: #004fff;
                  margin-right: 27px;
                  white-space: nowrap;
                }
                .content-upload-person {
                  color: #808080;
                  white-space: nowrap;
                  & span {
                    margin-right: 27px;
                  }
                }
                .content-time {
                  color: #808080;
                  display: flex;
                  align-items: center;
                  white-space: nowrap;
                  img {
                    border-style: none;
                    height: 17px;
                    width: 20px;
                    object-fit: cover;
                  }
                }
              }
              .item-content-text {
                font-family: "Source Han Sans CN Medium";
                font-weight: 500;
                font-size: 14px;
                line-height: 28px;
                margin-top: 15px;
                text-align: left;
                color: #808080;
              }
            }
          }
        }
      }
    }
    .my-pagination {
      margin-top: 46px;
    }
  }
</style>
